import styled from 'styled-components';

export default styled.select<{ error?: boolean }>`
  transition: 0.3s ease border-color;
  background-image: url();
  background-color: rgba(0, 0, 0, 0.3);
  background-position: right;
  background-repeat: no-repeat;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  padding: 0.2em 1em 0.2em 0.2em;
  width: inherit;
  box-sizing: border-box;
  font-weight: 400;
  height: 1.75em;
  appearance: none;

  border: 1px solid
    ${props =>
      props.error ? props.theme.red.clearer(0.5) : 'rgba(0, 0, 0, 0.1)'};

  &:focus {
    border-color: ${props => props.theme.secondary.clearer(0.6)};
  }
`;
